/*
var img = document.createElement("img");
img.src = "/Users/gshysun/Desktop/D3 project";
var src = document.getElementById("stackedGrouped");
src.appendChild(img)
*/
var n = 3, // number of layers
    m = 4; // number of samples per layer

//Sample data set for bar charts
var dataset = [
	       [
{ x: 0, y: 20 },
{ x: 1, y: 27 },
{ x: 2, y: 2 },
{ x: 3, y: 5}


		],
	       [
{ x: 0, y: 18 },
{ x: 1, y: 21 },
{ x: 2, y: 15 },
{ x: 3, y: 8}
		],
	       [
{ x: 0, y: 8 },
{ x: 1, y: 4 },
{ x: 2, y: 10 },
{ x: 3, y: 6 }
		],  
		   ];
var firms=["SAMSUNG","APPLE","LENOVO","HTC"];

var stack  = d3.layout.stack();
var layers = stack(dataset),
    yGroupMax  = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    yStackMax  = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 20, right: 10, bottom: 20, left: 0},
    width  = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08);
var yStack = d3.scale.linear()
    .domain([0, yStackMax])
    .range([height, 0]);
var yGroup=d3.scale.linear()
    .domain([0, yGroupMax])
    .range([height, 0]);



var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);


//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
var layer = svg.selectAll(".layer")
    .data(layers)
    .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); })
    
    var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", height)
    .attr("width", x.rangeBand())
    .attr("height", 0);
                        
var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(4)
    .tickValues([''])
    .orient("bottom");
                  
var yAxisStack=d3.svg.axis()
    .scale(yStack)
    .tickSize(0)
    .orient("left")
    .ticks(8)
    .tickPadding(10);
var yAxisGroup=d3.svg.axis()
    .scale(yGroup)
    .tickSize(0)
    .orient("left")
    .ticks(8)
    .tickPadding(10);



rect.transition()
    .delay(function(d, i) { return i * 10; })
    .attr("y", function(d) { return yStack(d.y0 + d.y); })
    .attr("height", function(d) { return yStack(d.y0) - yStack(d.y0 + d.y); });
         
var ge = svg.append("g")
    .attr("class", "xaxis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
      
for( var i=0;i<firms.length;i++)
    {
	ge.append("text")
	    .attr("x", 40 + 53*3*(i))
	    .attr("dy", "1.5em")
	    .text(firms[i]);
    }
              

   
d3.selectAll("input").on("change", change);

var timeout = setTimeout(function() {
	d3.select("input[value=\"grouped\"]").property("checked", true).each(change); 
    }, 2000);

function change() {
    clearTimeout(timeout);
    if (this.value === "grouped") 
	transitionGrouped();                         
    else 
	transitionStacked();
}
 
 
function transitionGrouped() 
{

    svg.selectAll(".yaxis").remove();   
    svg.append("g")
	.attr("class", "yaxis")
	.attr("transform", "translate(" +margin.left+27+ ",0)")
	.call(yAxisGroup);

    yGroup.domain([0, yGroupMax]);
    rect.transition()
	.duration(500)
	.delay(function(d, i) { return i * 10; })
	.attr("x", function(d, i, j) { return 10 + x(d.x) + x.rangeBand() / n * j; })
	.attr("width", x.rangeBand() / n)
	.transition()
	.attr("y", function(d) { return yGroup(d.y); })
	.attr("height", function(d) { return height - yGroup(d.y); });
}

function transitionStacked() 
{
      
    svg.selectAll(".yaxis").remove();
    svg.append("g")
	.attr("class", "yaxis")
	.attr("transform", "translate(" +margin.left+27+ ",0)")
	.call(yAxisStack);
 
    yStack.domain([0, yStackMax]);
    
    rect.transition()
	.duration(500)
	.delay(function(d, i) { return i * 10; })
	.attr("y", function(d) { return yStack(d.y0 + d.y); })
	.attr("height", function(d) { return yStack(d.y0) - yStack(d.y0 + d.y); })
	.transition()
	.attr("x", function(d) { return 10+x(d.x); })
	.attr("width", x.rangeBand());
}